<template>
  <div>
    <Title :title="'实时网联车'"/>
    <div class="box">
      <div class="itemBg" v-for="item in dataList" :key="item.name">
        <div class="itemBgFlex">
          <div class="itemBgLeft">
            <!-- <div>{{ item.icon }}</div> -->
            <!-- <img :src="item.url" alt=""> -->
            <div>{{ item.per + '%' }}</div>
          </div>
          <div class="itemBgRight">
            <div><b><i></i><span>{{ typeList[item.type] }}</span></b><b><strong>{{item.num}}</strong><p>辆</p></b></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, watch } from 'vue';
import Title from '../title.vue'
import { useUserStore } from '@/store/user';
// import { xiaoche } from '@/assets/images/imagesIn'
import { getNetCarStatistic } from '../../../../utils/apiComponent'
// import icon_kongjian from '[publicPath]static/images/componentright/icon_kongjian.png'
// import icon_baohedu from '[publicPath]static/images/componentright/icon_baohedu.png'
// import icon_liuliang from '[publicPath]static/images/componentright/icon_liuliang.png'
// import icon_shijian from '[publicPath]static/images/componentright/icon_shijian.png'
// import icon_xingcheng from '[publicPath]static/images/componentright/icon_xingcheng.png'
// import icon_tingche from '[publicPath]static/images/componentright/icon_tingche.png'
export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title
  },
  setup() {
    const data = reactive({
      typeList: {
        "01": '小轿车',
        "04": '公交车',
        "03": '网约车',
        "07": '无人清扫车',
        "06": '工程车',
        "00": '其他',
      },
      dataList:[{
        "type": "01",
        "per": "0.00",
        "num": 0
      },{
        "type": "01",
        "per": "0.00",
        "num": 0
      },{
        "type": "01",
        "per": "0.00",
        "num": 0
      },{
        "type": "01",
        "per": "0.00",
        "num": 0
      },{
        "type": "01",
        "per": "0.00",
        "num": 0
      },{
        "type": "01",
        "per": "0.00",
        "num": 0
      }]
    })
    const initData = () => {
      getNetCarStatistic().then((res) => {
        // console.log(res)
        data.dataList = res
      })
    }
    onMounted(() => {
      initData()
    })
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
})
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  // margin-bottom: 10px;
}
.itemBgFlex{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // height: 48px;
}
.itemBg{
  width: 50%;
  // padding: 0 7px;
  margin-bottom: 60px;;
  font-size: 16px;;
  // background-image: url('@{publicPath}static/images/bg_ganzhiduixiagn.png');
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  display: inline-block;
  // background: rgba(48,81,120,0.4);
  // border: 1px solid rgba(90,176,237,0.4);
  // margin-bottom: 20px;

  // align-items: center;
  // justify-content: space-between;
}
.itemBg:nth-child(3), .itemBg:nth-child(6){
  margin-right: 0;
}
.itemBgRight{
  display: flex;
  flex-direction: column;
  // height: 18px;
  justify-content: center;
  align-items: flex-start;
  color: rgba(203,233,255,0.5);
}
.itemBgRight div:nth-child(1){
  font-size: 18px;
  margin-right: 2px;
  margin-bottom: 10px;
  color: rgba(0, 247, 255, 1);
  width: 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  b{
    display: flex;
    justify-content: space-around;
    align-items: center;
    i{
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(0, 166, 255, 1);
      margin-right: 10px;
    }
    span{
      font-size: 20px;
      color: #fff;;
    }
    strong{
      font-size: 22px;
      color: rgba(236, 253, 72, 1);
    }
    p{
      font-size: 12px;
      margin-left: 5px;;
      color: #fff;;
      line-height: 30px;;
    }
  }
}
.itemBgRight div:nth-child(2){
  width: 145px;
  height: 28px;
  background-image: url('@{publicPath}static/images/link/threebot.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.itemBgLeft{
  display: flex;
  // height: 18px;
  justify-content: flex-start;
  align-items: center;
  width: 85px;
  height: 85px;;
  margin-right: 15px;
  div{
    width: 100%;
    height: 100%;;
    background-image: url('@{publicPath}static/images/link/threeicon.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 85px;
  }
}
img{
  width: 100%;
  height: 100%;;
}
</style>